<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="850px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="140px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="案件名称" prop="caseName">
                            <el-input
                                v-model="formData.caseName"
                                class="w-[240px]"
                                placeholder="请输入案件名称"
                            />
                        </el-form-item>
                        <el-form-item label="我方文号" prop="ourRef">
                            <el-input
                                v-model="formData.ourRef"
                                class="w-[220px]"
                                placeholder="请输入我方文号"
                            />
                        </el-form-item>
                        <el-form-item label="业务类型" prop="businessType">
                            <el-select
                                class="flex-1 w-[240px]"
                                v-model="formData.businessType"
                                placeholder="请选择业务类型"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="国家（地区）" prop="designatedCountry">
                            <el-input
                                v-model="formData.designatedCountry"
                                class="w-[220px]"
                                placeholder="请输入申请国家（地区）"
                            />
                        </el-form-item>

                        <el-form-item label="客户文号" prop="customerDocumentNumber">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.customerDocumentNumber"
                                placeholder="请输入客户文号"
                            />
                        </el-form-item>
                        <el-form-item label="版权类型" prop="copyrightType">
                            <el-select
                                class="flex-1 w-[220px]"
                                v-model="formData.copyrightType"
                                placeholder="请选择版权类型"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="案件流向" prop="caseFlow">
                            <el-select
                                class="flex-1 w-[240px]"
                                v-model="formData.caseFlow"
                                placeholder="请选择案件流向"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="案源国" prop="countryOfOrigin">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.countryOfOrigin"
                                placeholder="请输入案源国"
                            />
                        </el-form-item>
                        <el-form-item label="代理机构" prop="agency">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.agency"
                                placeholder="请输入代理机构"
                            />
                        </el-form-item>
                        <el-form-item label="申请方式" prop="proposalForm">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.proposalForm"
                                placeholder="请输入申请方式"
                            />
                        </el-form-item>
                        <el-form-item label="有无材料" prop="isMaterials">
                            <el-select
                                class="flex-1 w-[240px]"
                                v-model="formData.isMaterials"
                                placeholder="请选择有无材料"
                            >
                                <el-option label="有" value="2" />
                                <el-option label="无" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否代办资助" prop="isFund">
                            <el-select
                                class="flex-1 w-[220px]"
                                v-model="formData.isFund"
                                placeholder="请选择是否代办资助"
                            >
                                <el-option label="是" value="1" />
                                <el-option label="否" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始阶段" prop="initialPeriod">
                            <el-select
                                class="flex-1 w-[240px]"
                                v-model="formData.initialPeriod"
                                placeholder="请选择起始阶段"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="受理号" prop="referenceNumber">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.referenceNumber"
                                placeholder="请输入受理号"
                            />
                        </el-form-item>
                        <el-form-item label="合同编号" prop="contractNumber">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.contractNumber"
                                placeholder="请输入合同编号"
                            />
                        </el-form-item>
                        <el-form-item label="预算" prop="budget">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.budget"
                                placeholder="请输入预算"
                            />
                        </el-form-item>
                        <el-form-item label="作者" prop="author">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.author"
                                placeholder="请输入作者"
                            />
                        </el-form-item>
                        <el-form-item label="成本" prop="cost">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.cost"
                                placeholder="请输入成本"
                            />
                        </el-form-item>
                        <el-form-item label="归属地" prop="homeLocation">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.homeLocation"
                                placeholder="请输入归属地"
                            />
                        </el-form-item>
                        <el-form-item label="软件简称" prop="softwareAbbreviation">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.softwareAbbreviation"
                                placeholder="请输入软件简称"
                            />
                        </el-form-item>
                        <el-form-item label="版本号" prop="versionNumber">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.versionNumber"
                                placeholder="请输入版本号"
                            />
                        </el-form-item>
                        <el-form-item label="软件作品说明" prop="softwareWorkDescription">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.softwareWorkDescription"
                                placeholder="请输入软件作品说明"
                            />
                        </el-form-item>

                        <el-form-item label="硬件环境" prop="hardwareEnvironment">
                            <el-input
                                class="w-[240px]"
                                type="textarea"
                                v-model="formData.hardwareEnvironment"
                                placeholder="请输入硬件环境"
                            />
                        </el-form-item>
                        <el-form-item label="软件环境" prop="softwareEnvironment">
                            <el-input
                                class="w-[220px]"
                                type="textarea"
                                v-model="formData.softwareEnvironment"
                                placeholder="请输入软件环境"
                            />
                        </el-form-item>
                        <el-form-item label="编程语言" prop="programmingLanguage">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.programmingLanguage"
                                placeholder="请输入编程语言"
                            />
                        </el-form-item>
                        <el-form-item label="源程序量" prop="sourceQuantity">
                            <el-input
                                class="w-[220px]"
                                v-model="formData.sourceQuantity"
                                placeholder="请输入源程序量"
                            />
                        </el-form-item>
                        <el-form-item label="主要功能和技术特点" prop="functionAndArt">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.functionAndArt"
                                placeholder="请输入主要功能和技术特点"
                            />
                        </el-form-item>
                        <el-form-item label="发表状态" prop="publishedStatus">
                            <el-radio-group
                                v-model="formData.publishedStatus"
                                placeholder="请选择发表状态"
                            >
                                <el-radio label="0">已发表</el-radio>
                                <el-radio label="1">未发表</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="开发完成日期" prop="developmentCompletionDate">
                            <el-date-picker
                                style="width: 240px"
                                class="flex-1 !flex"
                                v-model="formData.developmentCompletionDate"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择开发完成日期"
                            />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                class="w-[240px]"
                                v-model="formData.remark"
                                type="textarea"
                                placeholder="请输入备注"
                            />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="承办信息" name="second">
                    <el-form
                        ref="formRef"
                        :model="formData"
                        label-width="90px"
                        :rules="formRules"
                        :inline="true"
                    >
                        <el-form-item label="承办部门" prop="undertakingDepartment">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.undertakingDepartment"
                                placeholder="请选择承办部门"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处理人" prop="conductor">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.conductor"
                                placeholder="请输入处理人"
                            />
                        </el-form-item>
                        <el-form-item label="所属分布" prop="ownershipDistribution">
                            <el-select
                                class="flex-1 w-[280px]"
                                v-model="formData.ownershipDistribution"
                                placeholder="请选择所属分布"
                            >
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否配案" prop="isStateCompensation">
                            <el-radio-group
                                v-model="formData.isStateCompensation"
                                placeholder="请选择是否配案"
                            >
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="处理事项" prop="handlingInformation">
                            <el-input
                                class="w-[280px]"
                                v-model="formData.handlingInformation"
                                placeholder="请输入处理事项"
                            />
                        </el-form-item>
                        <el-form-item label="委托日期" prop="principalDates">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.principalDates"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择委托日期"
                            />
                        </el-form-item>
                        <el-form-item label="客户期限" prop="customerTerm">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.customerTerm"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择客户期限"
                            />
                        </el-form-item>
                        <el-form-item label="内部期限" prop="internalWearLife">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="formData.internalWearLife"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择内部期限"
                            />
                        </el-form-item>
                        <!-- <el-form-item label="案件类型" prop="caseType">
                            <el-select class="flex-1" v-model="formData.caseType" placeholder="请选择案件类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="申请类型" prop="putinType">
                            <el-select class="flex-1" v-model="formData.putinType" placeholder="请选择申请类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="税率" prop="taxRate">
                            <el-input v-model="formData.taxRate" placeholder="请输入税率" />
                        </el-form-item> -->
                        <!-- <el-form-item label="成本类型" prop="costType">
                            <el-select class="flex-1" v-model="formData.costType" placeholder="请选择成本类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="贡献额" prop="contributionPool">
                            <el-input v-model="formData.contributionPool" placeholder="请输入贡献额" />
                        </el-form-item> -->
                        <!-- <el-form-item label="选择已有案件" prop="haveCase">
                            <el-input v-model="formData.haveCase" placeholder="请输入选择已有案件" />
                        </el-form-item> -->
                        <!-- <el-form-item label="商标类别" prop="brandType">
                            <el-select class="flex-1" v-model="formData.brandType" placeholder="请选择商标类别">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="类别数量" prop="classQuantity">
                            <el-input v-model="formData.classQuantity" placeholder="请输入类别数量" />
                        </el-form-item>
                        <el-form-item label="申请数量" prop="quantity">
                            <el-input v-model="formData.quantity" placeholder="请输入申请数量" />
                        </el-form-item>
                        <el-form-item label="官费" prop="officialFee">
                            <el-input v-model="formData.officialFee" placeholder="请输入官费" />
                        </el-form-item> -->
                        <!-- <el-form-item label="代理费" prop="agencyFee">
                            <el-input v-model="formData.agencyFee" placeholder="请输入代理费" />
                        </el-form-item>
                        <el-form-item label="第三方费" prop="hirdPartyPayment">
                            <el-input v-model="formData.hirdPartyPayment" placeholder="请输入第三方费" />
                        </el-form-item>
                        <el-form-item label="签单金额" prop="signedAmount">
                            <el-input v-model="formData.signedAmount" placeholder="请输入签单金额" />
                        </el-form-item>
                        <el-form-item label="开票金额" prop="invoiceValue">
                            <el-input v-model="formData.invoiceValue" placeholder="请输入开票金额" />
                        </el-form-item>
                        <el-form-item label="实收金额" prop="fundsReceived">
                            <el-input v-model="formData.fundsReceived" placeholder="请输入实收金额" />
                        </el-form-item> -->
                        <!-- <el-form-item label="实收日期" prop="paidupDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.paidupDate" type="datetime" clearable
                                value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择实收日期" />
                        </el-form-item>
                        <el-form-item label="我方案号" prop="planNumber">
                            <el-input v-model="formData.planNumber" placeholder="请输入我方案号" />
                        </el-form-item>
                        <el-form-item label="案件状态" prop="caseStatus">
                            <el-radio-group v-model="formData.caseStatus" placeholder="请选择案件状态">
                                <el-radio label="0">请选择字典生成</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="当前案件环节" prop="caseLink">
                            <el-input v-model="formData.caseLink" placeholder="请输入当前案件环节" />
                        </el-form-item> -->
                        <!-- <el-form-item label="是否立案" prop="isRegister">
                            <el-select class="flex-1" v-model="formData.isRegister" placeholder="请选择是否立案">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否作废" prop="isInvalid">
                            <el-select class="flex-1" v-model="formData.isInvalid" placeholder="请选择是否作废">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否已有案件" prop="isExistingcase">
                            <el-select class="flex-1" v-model="formData.isExistingcase" placeholder="请选择是否已有案件">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否需要纸质通知书" prop="isPapernotice">
                            <el-select class="flex-1" v-model="formData.isPapernotice" placeholder="请选择是否需要纸质通知书">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="点数用户" prop="click">
                            <el-input v-model="formData.click" placeholder="请输入点数用户" />
                        </el-form-item>
                        <el-form-item label="共有人" prop="partOwner">
                            <el-input v-model="formData.partOwner" placeholder="请输入共有人" />
                        </el-form-item>
                        <el-form-item label="办理事项" prop="todonote">
                            <el-input v-model="formData.todonote" placeholder="请输入办理事项" />
                        </el-form-item>
                        <el-form-item label="办理日期" prop="manageDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.manageDate" type="datetime" clearable
                                value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择办理日期" />
                        </el-form-item>
                        <el-form-item label="点数类型" prop="countType">
                            <el-select class="flex-1" v-model="formData.countType" placeholder="请选择点数类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="点数数量" prop="numberOfPoints">
                            <el-input v-model="formData.numberOfPoints" placeholder="请输入点数数量" />
                        </el-form-item>
                        <el-form-item label="点数状态" prop="addtotalstatepoint">
                            <el-input v-model="formData.addtotalstatepoint" placeholder="请输入点数状态" />
                        </el-form-item>
                        <el-form-item label="提成日期" prop="royaltyDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.royaltyDate" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择提成日期" />
                        </el-form-item>
                        <el-form-item label="工作量点数" prop="workPoints">
                            <el-input v-model="formData.workPoints" placeholder="请输入工作量点数" />
                        </el-form-item>
                        <el-form-item label="创建人员" prop="creator">
                            <el-input v-model="formData.creator" placeholder="请输入创建人员" />
                        </el-form-item>
                        <el-form-item label="费用类型" prop="chargeType">
                            <el-select class="flex-1" v-model="formData.chargeType" placeholder="请选择费用类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="币别" prop="currency">
                            <el-input v-model="formData.currency" placeholder="请输入币别" />
                        </el-form-item>
                        <el-form-item label="金额" prop="sum">
                            <el-input v-model="formData.sum" placeholder="请输入金额" />
                        </el-form-item>
                        <el-form-item label="预请款日" prop="advancePaymentDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.advancePaymentDate" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择预请款日" />
                        </el-form-item>
                        <el-form-item label="请款单号" prop="paymentRequestNumber">
                            <el-input v-model="formData.paymentRequestNumber" placeholder="请输入请款单号" />
                        </el-form-item>
                        <el-form-item label="请款日期" prop="requestedDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.requestedDate" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择请款日期" />
                        </el-form-item>
                        <el-form-item label="应收日期" prop="accountsDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.accountsDate" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择应收日期" />
                        </el-form-item>
                        <el-form-item label="发票号" prop="invoiceNumber">
                            <el-input v-model="formData.invoiceNumber" placeholder="请输入发票号" />
                        </el-form-item>
                        <el-form-item label="费用名称" prop="chargeName">
                            <el-input v-model="formData.chargeName" placeholder="请输入费用名称" />
                        </el-form-item>
                        <el-form-item label="费用描述" prop="chargeDepict">
                            <el-input v-model="formData.chargeDepict" placeholder="请输入费用描述" />
                        </el-form-item>
                        <el-form-item label="费用描述英文" prop="chargeDepictfine">
                            <el-input v-model="formData.chargeDepictfine" placeholder="请输入费用描述英文" />
                        </el-form-item>
                        <el-form-item label="应收金额" prop="extendedAmount">
                            <el-input v-model="formData.extendedAmount" placeholder="请输入应收金额" />
                        </el-form-item>
                        <el-form-item label="折扣率" prop="discountRate">
                            <el-input v-model="formData.discountRate" placeholder="请输入折扣率" />
                        </el-form-item>
                        <el-form-item label="数量" prop="count">
                            <el-input v-model="formData.count" placeholder="请输入数量" />
                        </el-form-item>
                        <el-form-item label="汇率" prop="parities">
                            <el-input v-model="formData.parities" placeholder="请输入汇率" />
                        </el-form-item>
                        <el-form-item label="收款公司账户" prop="collectingCompanyAccount">
                            <el-input v-model="formData.collectingCompanyAccount" placeholder="请输入收款公司账户" />
                        </el-form-item>
                        <el-form-item label="收款状态" prop="collectionStatus">
                            <el-radio-group v-model="formData.collectionStatus" placeholder="请选择收款状态">
                                <el-radio label="0">请选择字典生成</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="账户明细" prop="accountDetails">
                            <el-input v-model="formData.accountDetails" placeholder="请输入账户明细" />
                        </el-form-item>
                        <el-form-item label="开票时间" prop="slt">
                            <el-date-picker class="flex-1 !flex" v-model="formData.slt" type="datetime" clearable
                                value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择开票时间" />
                        </el-form-item>
                        <el-form-item label="外方账单号" prop="externalBillingNumber">
                            <el-input v-model="formData.externalBillingNumber" placeholder="请输入外方账单号" />
                        </el-form-item>
                        <el-form-item label="外方账单日期" prop="externalBillingDate">
                            <el-date-picker class="flex-1 !flex" v-model="formData.externalBillingDate" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择外方账单日期" />
                        </el-form-item>
                        <el-form-item label="垫交状态" prop="beddingCondition">
                            <el-input v-model="formData.beddingCondition" placeholder="请输入垫交状态" />
                        </el-form-item>
                        <el-form-item label="垫交人" prop="handOver">
                            <el-input v-model="formData.handOver" placeholder="请输入垫交人" />
                        </el-form-item>
                        <el-form-item label="费用备注" prop="expenseNote">
                            <el-input v-model="formData.expenseNote" placeholder="请输入费用备注" />
                        </el-form-item>
                        <el-form-item label="费减类型" prop="reductionType">
                            <el-select class="flex-1" v-model="formData.reductionType" placeholder="请选择费减类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="实际币别" prop="actualCurrency">
                            <el-input v-model="formData.actualCurrency" placeholder="请输入实际币别" />
                        </el-form-item> -->
                        <!-- <el-form-item label="官方期限" prop="officialDeadline">
                            <el-date-picker class="flex-1 !flex" v-model="formData.officialDeadline" type="datetime"
                                clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择官方期限" />
                        </el-form-item> -->
                        <!-- <el-form-item label="相关案名称" prop="relevantCaseName">
                            <el-input v-model="formData.relevantCaseName" placeholder="请输入相关案名称" />
                        </el-form-item>
                        <el-form-item label="相关类型" prop="correlationType">
                            <el-select class="flex-1" v-model="formData.correlationType" placeholder="请选择相关类型">
                                <el-option label="请选择字典生成" value="" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="操作人ID" prop="userId">
                            <el-input v-model="formData.userId" placeholder="请输入操作人ID" />
                        </el-form-item>
                        <el-form-item label="操作人名称" prop="userName">
                            <el-input v-model="formData.userName" placeholder="请输入操作人名称" />
                        </el-form-item>
                        <el-form-item label="修改人编号" prop="updateUserId">
                            <el-input v-model="formData.updateUserId" placeholder="请输入修改人编号" />
                        </el-form-item>
                        <el-form-item label="修改人名称" prop="updateUserName">
                            <el-input v-model="formData.updateUserName" placeholder="请输入修改人名称" />
                        </el-form-item> -->
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="费用信息" name="third">
                    <div style="display: flex; justify-content: space-between">
                      <div style="display: flex">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            代理费列表
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                      </div>
                        <div style="padding: 0px 20px">
                            代理费：0 官费：0 第三方费用费：0汇总：0
                        </div>
                    </div>
                    <div style="padding: 0px 10px">
                        <el-radio-group v-model="isState">
                            <el-radio label="0">自定义</el-radio>
                            <el-radio label="1">统包</el-radio>
                            <el-radio label="2">按项</el-radio>
                        </el-radio-group>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            官费列表
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="OptionalOfficialFee = true"
                        >
                            选择官费
                        </el-button>
                    </div>
                    <el-table class="mt-4" size="large" stripe>
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="费用名称" min-width="100" />
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="数量" min-width="100" />
                        <el-table-column label="实际币别" min-width="100" />
                        <el-table-column label="实际金额" min-width="100" />
                        <el-table-column label="应收日期" min-width="100" />
                        <el-table-column label="实收日期" min-width="100" />
                        <el-table-column label="官费期限" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                    </el-table>
                    <div style="display: flex; justify-content: start; padding: 20px 0px">
                        <div style="font-weight: bold; color: #000; padding: 0px 20px">
                            第三方费用支付
                        </div>
                        <el-button
                            v-perms="['basic:add']"
                            type="primary"
                            size="small"
                            @click="dialogFormVisible = true"
                        >
                            <template #icon>
                                <icon name="el-icon-Plus" />
                            </template>
                            新增
                        </el-button>
                    </div>
                    <div style="padding: 0px 10px">
                        <el-radio-group v-model="isStateCompensation">
                            <el-radio label="0">自定义</el-radio>
                            <el-radio label="1">按额</el-radio>
                        </el-radio-group>
                    </div>
                    <el-table class="mt-4" size="large">
                        <el-table-column label="费用类型" min-width="100" />
                        <el-table-column label="币别" min-width="100" />
                        <el-table-column label="金额" min-width="100" />
                        <el-table-column label="账单号" min-width="100" />
                        <el-table-column label="账单日" min-width="100" />
                        <el-table-column label="应付日期" min-width="100" />
                        <el-table-column label="实付日期" min-width="100" />
                        <el-table-column label="收款方" min-width="100" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="相关案件" name="fourth">
                  <el-form
                      ref="formRef"
                      :model="formData"
                      label-width="90px"
                      :rules="formRules"
                      :inline="true"
                  >
                    <el-form-item label="相关类型" prop="correlationType">
                        <el-select
                            v-model="queryParams.correlationType"
                            class="w-[280px]"
                            clearable
                        >
                            <el-option label="家族案件" value="1" />
                            <el-option label="技术相关" value="2" />
                            <el-option label="同日申请" value="3" />
                            <el-option label="同日递交" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="添加相关" prop="ourRef">
                        <el-input class="w-[280px]" v-model="queryParams.ourRef" />
                    </el-form-item>
                  </el-form>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists"
                    >
                        <el-table-column label="我方文号" prop="ourRef" min-width="100" />
                        <el-table-column
                            label="相关案名称"
                            prop="relevantCaseName"
                            min-width="100"
                        />
                        <el-table-column label="相关类型" prop="correlationType" min-width="100" />
                        <el-table-column
                            label="国家（地区）"
                            prop="designatedCountry"
                            min-width="150"
                        />
                        <el-table-column label="申请类型" prop="putinType" min-width="100" />
                        <el-table-column label="案件状态" prop="caseStatus" min-width="100" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="点数信息" name="fifth">
                    <el-button
                        v-perms="['basic:add']"
                        type="primary"
                        size="small"
                        @click="tally = true"
                    >
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增
                    </el-button>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists"
                    >
                        <el-table-column label="共有人" prop="partOwner" min-width="100" />
                        <el-table-column label="办理事项" prop="todonote" min-width="100" />
                        <el-table-column label="办理日期" prop="manageDate" min-width="100" />
                        <el-table-column label="点数类型" prop="countType" min-width="100" />
                        <el-table-column label="点数数量" prop="numberOfPoints" min-width="100" />
                        <el-table-column
                            label="点数状态"
                            prop="addtotalstatepoint"
                            min-width="100"
                        />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button
                                    v-perms="['case:del']"
                                    type="danger"
                                    link
                                    @click="handleDelete(row.id)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-dialog v-model="OptionalOfficialFee" title="选择官费" width="1200px">
                <el-form-item prop="addressChinese">
                    <el-input v-model="formData.caseName" style="width: 270px" />
                    <el-button type="primary"> 查询 </el-button>
                </el-form-item>

                <el-table class="mt-4" size="large">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="费用名称" min-width="100" />
                    <el-table-column label="费减类型" min-width="100" />
                    <el-table-column label="币别" min-width="100" />
                    <el-table-column label="金额" min-width="100" />
                    <el-table-column label="数量" min-width="100" />
                    <el-table-column label="实际币别" min-width="100" />
                    <el-table-column label="实际金额" min-width="100" />
                    <el-table-column label="应收日期" min-width="100" />
                    <el-table-column label="实收日期" min-width="100" />
                    <el-table-column label="官方期限" min-width="100" />
                    <el-table-column label="实付日期" min-width="100" />
                    <el-table-column label="操作" min-width="100">
                        <template #default="{ row }">
                            <el-button
                                v-perms="['case:del']"
                                type="danger"
                                link
                                @click="handleDelete(row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <el-dialog v-model="dialogFormVisible" title="修改费用" width="1200px">
                <el-form
                    ref="formRef"
                    :model="formData"
                    label-width="100px"
                    :rules="formRules"
                    :inline="true"
                >
                    <el-form-item label="实收金额" prop="fundsReceived">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.fundsReceived"
                            placeholder="请输入实收金额"
                        />
                    </el-form-item>
                    <el-form-item label="是否作废" prop="isInvalid">
                        <el-select
                            class="flex-1 w-[220px]"
                            v-model="formData.isInvalid"
                            placeholder="请选择是否作废"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="实收日期" prop="paidupDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.paidupDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择实收日期"
                        />
                    </el-form-item>

                    <el-form-item label="请款单号" prop="paymentRequestNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.paymentRequestNumber"
                            placeholder="请输入请款单号"
                        />
                    </el-form-item>

                    <el-form-item label="发票号" prop="invoiceNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.invoiceNumber"
                            placeholder="请输入发票号"
                        />
                    </el-form-item>
                    <el-form-item label="请款日期" prop="requestedDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.requestedDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择请款日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用名称" prop="chargeName">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeName"
                            placeholder="请输入费用名称"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述" prop="chargeDepict">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeDepict"
                            placeholder="请输入费用描述"
                        />
                    </el-form-item>
                    <el-form-item label="应收日期" prop="accountsDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.accountsDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择应收日期"
                        />
                    </el-form-item>
                    <el-form-item label="费用描述英文" prop="chargeDepictfine">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.chargeDepictfine"
                            placeholder="请输入费用描述英文"
                        />
                    </el-form-item>

                    <el-form-item label="应收金额" prop="extendedAmount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.extendedAmount"
                            placeholder="请输入应收金额"
                        />
                    </el-form-item>
                    <el-form-item label="开票时间" prop="slt">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.slt"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择开票时间"
                        />
                    </el-form-item>
                    <el-form-item label="折扣率" prop="discountRate">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.discountRate"
                            placeholder="请输入折扣率"
                        />
                    </el-form-item>

                    <el-form-item label="数量" prop="count">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.count"
                            placeholder="请输入数量"
                        />
                    </el-form-item>
                    <el-form-item label="外方账单日期" prop="externalBillingDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            v-model="formData.externalBillingDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择外方账单日期"
                        />
                    </el-form-item>
                    <el-form-item label="汇率" prop="parities">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.parities"
                            placeholder="请输入汇率"
                        />
                    </el-form-item>

                    <el-form-item label="收款公司账户" prop="collectingCompanyAccount">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.collectingCompanyAccount"
                            placeholder="请输入收款公司账户"
                        />
                    </el-form-item>

                    <el-form-item label="账户明细" prop="accountDetails">
                        <el-input
                            class="w-[280px]"
                            v-model="formData.accountDetails"
                            placeholder="请输入账户明细"
                        />
                    </el-form-item>
                    <el-form-item label="收款状态" prop="collectionStatus">
                        <el-select
                            class="flex-1"
                            v-model="formData.collectionStatus"
                            placeholder="请选择收款状态"
                        >
                            <el-option label="是" value="1" />
                            <el-option label="否" value="2" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="外方账单号" prop="externalBillingNumber">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.externalBillingNumber"
                            placeholder="请输入外方账单号"
                        />
                    </el-form-item>

                    <el-form-item label="垫交状态" prop="beddingCondition">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.beddingCondition"
                            placeholder="请选择垫交状态"
                        >
                            <el-option label="已垫交" value="1" />
                            <el-option label="未垫交" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="垫交人" prop="handOver">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.handOver"
                            placeholder="请输入垫交人"
                        />
                    </el-form-item>
                    <el-form-item label="税率" prop="paidupDate">
                        <el-input
                            class="w-[220px]"
                            v-model="formData.handOver"
                            placeholder="请输入税率"
                        />
                    </el-form-item>
                    <el-form-item label="备注" prop="expenseNote">
                        <el-input
                            class="w-[280px]"
                            v-model="formData.expenseNote"
                            placeholder="请输入费用备注"
                        />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="tally" title="新增点数" width="900px">
                <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules" :inline="true">
                    <el-form-item label="点数用户" prop="click">
                        <el-input class="w-[280px]" v-model="formData.click" placeholder="请输入点数用户" />
                    </el-form-item>
                    <el-form-item label="共有人" prop="partOwner">
                        <el-input class="w-[280px]" v-model="formData.partOwner" placeholder="请输入共有人" />
                    </el-form-item>
                    <el-form-item label="办理事项" prop="todonote">
                        <el-input class="w-[280px]" v-model="formData.todonote" placeholder="请输入办理事项" />
                    </el-form-item>
                    <el-form-item label="办理日期" prop="manageDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            style="width: 280px"
                            v-model="formData.manageDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择办理日期"
                        />
                    </el-form-item>
                    <el-form-item label="点数类型" prop="countType">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.countType"
                            placeholder="请选择点数类型"
                        >
                            <el-option label="点数" value="" />
                            <el-option label="金额" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="点数数量" prop="numberOfPoints">
                        <el-input class="w-[280px]" v-model="formData.numberOfPoints" placeholder="请输入点数数量" />
                    </el-form-item>
                    <el-form-item label="点数状态" prop="addtotalstatepoint">
                        <el-select
                            class="flex-1 w-[280px]"
                            v-model="formData.addtotalstatepoint"
                            placeholder="请选择点数状态"
                        >
                            <el-option label="办理中" value="" />
                            <el-option label="已完成" value="" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提成日期" prop="royaltyDate">
                        <el-date-picker
                            class="flex-1 !flex"
                            style="width: 280px"
                            v-model="formData.royaltyDate"
                            type="datetime"
                            clearable
                            value-format="YYYY-MM-DD hh:mm:ss"
                            placeholder="请选择提成日期"
                        />
                    </el-form-item>
                    <el-form-item label="工作量点数" prop="workPoints">
                        <el-input class="w-[280px]" v-model="formData.workPoints" placeholder="请输入工作量点数" />
                    </el-form-item>
                    <el-form-item label="创建人员" prop="creator">
                        <el-input class="w-[280px]" v-model="formData.creator" placeholder="请输入创建人员" />
                    </el-form-item>
                    <el-form-item label="修改人员" prop="updateUserName">
                        <el-input class="w-[280px]"
                            v-model="formData.updateUserName"
                            placeholder="请输入修改人名称"
                        />
                    </el-form-item>
                </el-form>
              <div
                  style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                    "
              >
                <el-button v-perms="['basic:add']" type="primary"> 确定 </el-button>
                <el-button type="primary"> 返回 </el-button>
              </div>
            </el-dialog>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { caseEdit, caseAdd, caseDetail, caseLists, caseDelete } from '@/api/case'
import Popup from '@/components/popup/index.vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'

const isState = ref('')
const isStateCompensation = ref('')
const activeName = 'first'
const dialogFormVisible = ref(false)
const tally = ref(false)
const OptionalOfficialFee = ref(false)

const queryParams = reactive({
    correlationType: '',
    correlationTypeid: '',
    ourRef: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: caseLists,
    params: queryParams
})

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await caseDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑新建合同案件信息' : '新增案件信息'
})

const formData = reactive({
    caseName: '',
    caseType: '',
    businessType: '',
    putinType: '',
    undertakingDepartment: '',
    conductor: '',
    taxRate: '',
    costType: '',
    cost: '',
    contributionPool: '',
    ownershipDistribution: '',
    haveCase: '',
    designatedCountry: '',
    brandType: '',
    classQuantity: '',
    quantity: '',
    officialFee: '',
    agencyFee: '',
    hirdPartyPayment: '',
    signedAmount: '',
    invoiceValue: '',
    fundsReceived: '',
    paidupDate: '',
    planNumber: '',
    caseStatus: '',
    caseLink: '',
    remark: '',
    caseNameid: '',
    businessTypeid: '',
    undertakingDepartmentid: '',
    ownershipDistributionid: '',
    costTypeid: '',
    correlationTypeid: '',
    isRegister: '',
    isInvalid: '',
    isExistingcase: '',
    isPapernotice: '',
    customerDocumentNumber: '',
    copyrightType: '',
    caseFlow: '',
    countryOfOrigin: '',
    agency: '',
    proposalForm: '',
    isMaterials: '',
    isFund: '',
    initialPeriod: '',
    referenceNumber: '',
    contractNumber: '',
    budget: '',
    author: '',
    homeLocation: '',
    softwareAbbreviation: '',
    versionNumber: '',
    softwareWorkDescription: '',
    developmentCompletionDate: '',
    publishedStatus: '',
    hardwareEnvironment: '',
    softwareEnvironment: '',
    programmingLanguage: '',
    sourceQuantity: '',
    functionAndArt: '',
    handlingInformation: '',
    principalDates: '',
    customerTerm: '',
    internalWearLife: '',
    isStateCompensation: '',
    click: '',
    partOwner: '',
    todonote: '',
    manageDate: '',
    countType: '',
    numberOfPoints: '',
    addtotalstatepoint: '',
    royaltyDate: '',
    workPoints: '',
    creator: '',
    chargeType: '',
    currency: '',
    sum: '',
    advancePaymentDate: '',
    paymentRequestNumber: '',
    requestedDate: '',
    accountsDate: '',
    invoiceNumber: '',
    chargeName: '',
    chargeDepict: '',
    chargeDepictfine: '',
    extendedAmount: '',
    discountRate: '',
    count: '',
    parities: '',
    collectingCompanyAccount: '',
    collectionStatus: '',
    accountDetails: '',
    slt: '',
    externalBillingNumber: '',
    externalBillingDate: '',
    beddingCondition: '',
    handOver: '',
    expenseNote: '',
    reductionType: '',
    actualCurrency: '',
    officialDeadline: '',
    ourRef: '',
    relevantCaseName: '',
    correlationType: '',
    userId: '',
    userName: '',
    id: '',
    updateUserId: '',
    updateUserName: ''
})

const formRules = {
    caseName: [
        {
            required: true,
            message: '请输入案件名称',
            trigger: ['blur']
        }
    ],
    businessType: [
        {
            required: true,
            message: '请选择业务类型',
            trigger: ['blur']
        }
    ],
    undertakingDepartment: [
        {
            required: true,
            message: '请选择承办部门',
            trigger: ['blur']
        }
    ],
    designatedCountry: [
        {
            required: true,
            message: '请输入申请国家（地区）',
            trigger: ['blur']
        }
    ],
    handlingInformation: [
        {
            required: true,
            message: '请输入处理事项',
            trigger: ['blur']
        }
    ],
    id: [
        {
            required: true,
            message: '请输入主键ID',
            trigger: ['blur']
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const data: any = { ...formData }
    mode.value == 'edit' ? await caseEdit(data) : await caseAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await caseDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
